<template>
  <view class="help-container container">
    <view class="section-title text-center uni-my-4">
      <text class="title-icon">◈</text>
      <text>帮助中心</text>
    </view>

    <!-- 技术概览部分 -->
    <view class="tech-overview">
      <view class="overview-header">
        <text class="header-text">
          <text class="bi bi-code-square uni-my-2"></text>技术概览
        </text>
      </view>
      <view class="overview-content">
        <view class="tech-grid">
          <view
            v-for="(tech, index) in techStack"
            :key="index"
            class="tech-item animate__animated animate__fadeIn"
            :style="{ 'animation-delay': `${index * 0.1}s` }"
          >
            <view class="tech-card">
              <text class="tech-icon" :class="tech.icon"></text>

                <text class="tech-name">{{ tech.name }}</text>
                <text class="tech-desc">{{ tech.description }}</text>

            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 常见问题部分 -->
    <view class="faq-section">
      <view class="section-header">
        <text class="header-text">
          <text class="bi bi-question-circle uni-my-2"></text>常见问题
        </text>
      </view>
      <view class="faq-content">
        <uni-collapse>
          <uni-collapse-item
            v-for="(faq, index) in faqs2"
            :key="index"
            :title="faq.question"
            :class="{ 'animate__animated animate__fadeIn': true }"
            :style="{ 'animation-delay': `${index * 0.1}s` }"
          >
            <view class="faq-answer">
              <text>{{ faq.answer }}</text>
              <view v-if="faq.steps" class="step-list">
                <view
                  v-for="(step, stepIndex) in faq.steps"
                  :key="stepIndex"
                  class="step-item"
                >
                  <view class="step-number">{{ stepIndex + 1 }}</view>
                  <text class="step-content">{{ step }}</text>
                </view>
              </view>
              <view v-if="faq.tips" class="tips-box">
                <text class="bi bi-info-circle"></text>
                <text class="tips-text">{{ faq.tips }}</text>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>

    <!-- 联系支持 -->
    <view class="support-section mt-4">
      <view class="support-grid">
        <view class="support-item">
          <view class="support-card">
            <text class="bi bi-envelope-paper support-icon"></text>
            <text class="support-title">邮件支持</text>
            <text class="support-desc">2909643755@qq.com</text>
            <button class="support-btn" @tap="sendEmail">发送邮件</button>
          </view>
        </view>

        <view class="support-item">
          <view class="support-card">
            <text class="bi bi-chat-dots support-icon"></text>
            <text class="support-title">QQ客服</text>
            <text class="support-desc">工作时间: 9:00-18:00</text>
            <button class="support-btn" @tap="joinQQGroup">开始对话</button>
          </view>
        </view>

        <view class="support-item">
          <view class="support-card">
            <text class="bi bi-book support-icon"></text>
            <text class="support-title">帮助文档</text>
            <text class="support-desc">查看详细使用文档</text>
            <button class="support-btn" @tap="openDocs">浏览文档</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const faqs = ref([
  {
    q: "如何修改个人信息？",
    a: '进入"我的"-"设置"-"账号安全"中进行修改。',
  },
  {
    q: "如何联系客服？",
    a: "您可以通过页面底部的联系方式与我们取得联系。",
  },
]);

const guides = ref([
  {
    title: "AR体验使用指南",
    desc: "打开AR功能，对准傩面具，即可体验3D展示效果。",
  },
  {
    title: "文创商城购物指南",
    desc: "选择商品，加入购物车，填写收货信息即可完成购买。",
  },
]); // 技术栈数据
const techStack = [
  {
    name: "前端框架",
    icon: "bi bi-code-slash",
    description: "Vue 3 + Vite + Pinia",
  },

  {
    name: "状态管理",
    icon: "bi bi-database",
    description: "Pinia + Vue Router",
  },

  {
    name: "国际化",
    icon: "bi bi-translate",
    description: "Vue I18n",
  },
];

// 常见问题数据
const faqs2 = [
  {
    question: "如何修改个人资料？",
    answer: "您可以在个人中心页面修改您的个人信息。",
    steps: [
      "点击右上角头像，进入个人中心",
      '点击"编辑资料"按钮',
      '修改相关信息后点击"保存"',
    ],
  },
  {
    question: "页面加载很慢怎么办？",
    answer: "页面加载慢可能有以下几个原因：",
    steps: [
      "检查网络连接是否正常",
      "清除浏览器缓存和Cookie",
      "刷新页面或重新登录",
    ],
    tips: "如果问题仍然存在，请联系客服支持。",
  },
  {
    question: "如何清除本地缓存？",
    answer: "您可以通过以下方式清除缓存：",
    steps: ['进入"设置"页面', '找到"清除缓存"选项', "点击确认清除"],
  },
  {
    question: "忘记密码怎么办？",
    answer: "您可以通过以下步骤重置密码：",
    steps: ['点击登录页面的"忘记密码"', "输入注册邮箱接收验证码", "设置新密码"],
  },
];

const activePanel = ref([0]); // 默认展开第一个问题

// 添加交互方法
const sendEmail = () => {
  uni.setClipboardData({
    data: "2909643755@qq.com",
    success: () => {
      uni.showToast({
        title: "邮箱已复制",
        icon: "success",
      });
    },
  });
};

// 加入QQ群
const joinQQGroup = () => {
  // #ifdef H5
  window.location.href = "https://qm.qq.com/q/7uu9pZrJde";
  // #endif

  // #ifdef APP-PLUS || MP
  uni.setClipboard({
    data: "https://qm.qq.com/q/7uu9pZrJde",
    success: () => {
      uni.showToast({
        title: "链接已复制，请在浏览器中打开",
        icon: "none",
      });
    },
  });
  // #endif
};

const openDocs = () => {
  uni.setClipboardData({
    data: "https://cn.vuejs.org/guide/introduction.html",
    success: () => {
      uni.showToast({
        title: "文档链接已复制",
        icon: "success",
      });
    },
  });
  uni.navigateTo({
    url: "",
  });
};
</script>

<style lang="scss" scoped>
.help-container {
  padding: 40rpx;
  background: linear-gradient(135deg, #f6f8fc 0%, #f0f4ff 100%);
  min-height: 100vh;
}

.tech-overview,
.faq-section,
.support-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
}

.overview-header,
.section-header {
  margin-bottom: 30rpx;

  .header-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;

    .bi {
      color: var(--td-brand-color);
      margin-right: 16rpx;
      font-size: 40rpx;
    }
  }
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320rpx, 1fr));
  gap: 30rpx;
  padding: 20rpx 0;
}

.tech-card {
  background: #fff;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1rpx solid rgba(0, 0, 0, 0.05);

  &:hover {
    transform: translateY(-8rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  }
}

.tech-icon {
  font-size: 56rpx;
  color: var(--td-brand-color);


}

.tech-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin: 20rpx 0;
}

.tech-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320rpx, 1fr));
  gap: 40rpx;
  padding: 20rpx 0;
}

.support-card {
  background: #fff;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  text-align: center;
  transition: all 0.3s ease;
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

  &:hover {
    transform: translateY(-8rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  }
}

.support-icon {
  font-size: 48rpx;
  color: var(--td-brand-color);
  margin-bottom: 24rpx;
  display: block;
}

.support-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin: 20rpx 0;
}

.support-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
  line-height: 1.6;
}

.support-btn {
  background: var(--td-brand-color);
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
  border: none;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.step-number {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: var(--td-brand-color-light);
  color: var(--td-brand-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.tips-box {
  background: #f0f9ff;
  padding: 24rpx;
  border-radius: 12rpx;
  margin-top: 24rpx;
  display: flex;
  align-items: flex-start;
  border-left: 4rpx solid var(--td-brand-color);

  .bi {
    color: var(--td-brand-color);
    margin-right: 16rpx;
    font-size: 32rpx;
    margin-top: 4rpx;
  }

  .tips-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

@media screen and (max-width: 768px) {
  .tech-grid,
  .support-grid {
    grid-template-columns: 1fr;
  }

  .help-container {
    padding: 20rpx;
  }

  .tech-overview,
  .faq-section,
  .support-section {
    padding: 30rpx;
  }
}
</style>
